<template>
  <div id="app">
    <div class="row">
      <div class="col-md-3">
        <tree :data="baseData" showCheckbox @on-toggle-expand="treeToggleExpand"
              @on-select-change="treeSelectChange"></tree>
      </div>
      <div class="col-md-3">
        <tree :data="baseData1" @on-toggle-expand="treeToggleExpand"
              @on-select-change="treeSelectChange"></tree>
      </div>
    </div>
  </div>
</template>

<script>
  import Tree from './components/tree.vue'

  export default {
    name: 'app',
    components: {
      Tree
    },
    methods: {
      treeToggleExpand (d) {
        window.console.log(d)
      },
      treeSelectChange (data) {
        window.console.log(data)
      }
    },
    data () {
      return {
        baseData: [{
          opened: true,
          title: 'parent 1',
          icon: 'fa fa-folder icon-state-warning',
          children: [{
            title: 'parent 1-0',
            opened: true,
            icon: 'fa fa-folder',
            disabled: true,
            children: [{
              title: 'leaf1',
              icon: 'fa fa-folder icon-state-warning',
              disableCheckbox: true
            }, {
              title: 'leaf2',
              icon: 'fa fa-folder icon-state-warning',
              selected: true
            }]
          }, {
            title: 'parent 1-1',
            opened: true,
            selected: true,
            icon: 'fa fa-folder',
            children: [{
              title: '<span style="color: red">leaf1</span>',
              icon: 'fa fa-folder'
            }]
          }]
        }],
        baseData1: [{
          opened: true,
          title: 'parent 1',
          icon: 'fa fa-folder icon-state-warning',
          children: [{
            title: 'parent 1-0',
            opened: true,
            icon: 'fa fa-folder',
            disabled: true,
            children: [{
              title: 'leaf1',
              icon: 'fa fa-folder icon-state-warning',
              disableCheckbox: true
            }, {
              title: 'leaf2',
              icon: 'fa fa-folder icon-state-warning',
              selected: true
            }]
          }, {
            title: 'parent 1-1',
            opened: true,
            icon: 'fa fa-folder',
            children: [{
              title: '<span style="color: red">leaf1</span>',
              icon: 'fa fa-folder'
            }]
          }]
        }]
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
